import React, {PropTypes} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import Footer from '../../components/Footer'
import {Row, Col} from 'antd';
import {Menu, Breadcrumb, Icon} from 'antd';
import {Link} from 'react-router'
const MenuItemGroup = Menu.ItemGroup;
import './index.less'
const SubMenu = Menu.SubMenu;
import {fetchProfile, logout} from '../../actions/system';
import './index.less'
class App extends React.Component {
    constructor(props) {
        super(props);
    }

    handleClick(item, key, keyPath) {
        if (item.key == 'logout') {
            this.props.actions.logout();
        }
    }

    render() {
        const {user, actions} = this.props;
        const selectedKeys = ['logout','setting'];
        return (
            <div>
                <div className="ant-layout-topaside">
                    <div className="ant-layout-header">
                        <Row>
                            <Col span={19}>
                                <Menu theme="dark" mode="horizontal">
                                    <Menu.Item key="mail">
                                        <Link to="/home"><Icon type="mail"/>Navigation One</Link>
                                    </Menu.Item>
                                    <Menu.Item key="app">
                                        <Link to="/example"><Icon type="appstore"/>Navigation Two</Link>
                                    </Menu.Item>
                                    <SubMenu title={<span><Icon type="select"/>Navigation Three - Submenu</span>}>
                                        <MenuItemGroup title="Item 1">
                                            <Menu.Item key="setting:1">Option 1</Menu.Item>
                                            <Menu.Item key="setting:2">Option 2</Menu.Item>
                                        </MenuItemGroup>
                                        <MenuItemGroup title="Item 2">
                                            <Menu.Item key="setting:3">Option 3</Menu.Item>
                                            <Menu.Item key="setting:4">Option 4</Menu.Item>
                                        </MenuItemGroup>
                                    </SubMenu>

                                </Menu></Col>
                            <Col span={5} className="user-bar">
                                <Menu theme="dark" mode="horizontal" selectedKeys={selectedKeys} className="user-bar" onClick={this.handleClick.bind(this)}>
                                    <SubMenu title={<span><Icon type="poweroff"/>qsyan</span>}>
                                        <Menu.Item key="setting">个人设置</Menu.Item>
                                        <Menu.Item key="logout">注销</Menu.Item>
                                    </SubMenu>
                                </Menu>
                            </Col>
                        </Row>
                    </div>
                    <div className="ant-layout-container">
                        <div className="ant-layout-content">
                            {this.props.children}
                        </div>
                    </div>
                    <Footer />
                </div>
            </div>

        );
    }
}

App.propTypes = {
    user: PropTypes.object,
    children: PropTypes.node.isRequired
};

const mapStateToProps = (state) => {
    const {user} = state;
    return {
        user: user ? user : null,
    };
};

function mapDispatchToProps(dispatch) {
    return {actions: bindActionCreators({fetchProfile, logout}, dispatch)};
}

export default connect(mapStateToProps, mapDispatchToProps)(App);
